<template>
	<section class="hbox stretch">
		<section>
			<section class="vbox">
				<section class="scrollable padder-lg w-f-md" id="bjax-target">
					<a href="#" class="pull-right text-muted m-t-lg" data-toggle="class:fa-spin"><i class="icon-refresh i-lg  inline"
						 id="refresh"></i></a>
					<h2 class="font-thin m-b"> {{ zym }} <span class="musicbar animate inline m-l-sm" style="width:20px;height:20px">
							<span class="bar1 a1 bg-primary lter"></span>
							<span class="bar2 a2 bg-info lt"></span>
							<span class="bar3 a3 bg-success"></span>
							<span class="bar4 a4 bg-warning dk"></span>
							<span class="bar5 a5 bg-danger dker"></span>
						</span></h2>
					<div class="row row-sm">
						<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2" v-for="topVideo in topVideos">
							<div class="item">
								<div class="pos-rlt">
									<div class="top">
										<span class="pull-right m-t-sm m-r-sm badge bg-info">6</span>
									</div>
									<div class="bottom">
										<span class="badge bg-info m-l-sm m-b-sm">03:20</span>
									</div>
									<!-- 暂停效果 -->
									<!-- <div class="item-overlay r r-2x bg-light dker active"> -->
									<div class="item-overlay opacity r r-2x bg-black">
										<div class="text-info padder m-t-sm text-sm">
											<i class="fa fa-star"></i>
											<i class="fa fa-star"></i>
											<i class="fa fa-star"></i>
											<i class="fa fa-star-o text-muted"></i>
											<i class="fa fa-star-o text-muted"></i>
										</div>
										<div class="center text-center m-t-n">
											<a href="#" data-toggle="class">
												<i class="icon-control-play i-2x text"></i>
												<i class="icon-control-pause i-2x text-active"></i>
											</a>
										</div>
										<div class="bottom padder m-b-sm">
											<a href="#" class="pull-right active" data-toggle="class">
												<i class="fa fa-heart-o text"></i>
												<i class="fa fa-heart text-active text-danger"></i>
											</a>
											<a href="#" data-toggle="class">
												<i class="fa fa-plus-circle text"></i>
												<i class="fa fa-check-circle text-active text-info"></i>
											</a>
										</div>
									</div>
									<a href="#"><img :src="topVideo.photo" alt="" class="r r-2x img-full"></a>
								</div>
								<div class="padder-v">
									<a href="#" class="text-ellipsis">{{ topVideo.title }}</a>
									<a href="#" class="text-ellipsis text-xs text-muted">{{ topVideo.author }}</a>
								</div>
							</div>
						</div>
						<div class="clearfix visible-xs"></div>
					</div>
					<div class="row">
						<div class="col-md-7">
							<h3 class="font-thin">热门佛乐</h3>
							<div class="row row-sm">
								<div class="col-xs-6 col-sm-3" v-for="item in topSongs">
									<div class="item">
										<div class="pos-rlt">
											<div class="item-overlay opacity r r-2x bg-black">
												<div class="center text-center m-t-n">
													<a href="#"><i class="fa fa-play-circle i-2x"></i></a>
												</div>
											</div>
											<a href="#"><img :src="item.photo" alt="" class="r r-2x img-full"></a>
										</div>
										<div class="padder-v">
											<a href="#" class="text-ellipsis">{{ item.title }}</a>
											<a href="#" class="text-ellipsis text-xs text-muted">{{ item.author }}</a>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="col-md-5">
							<h3 class="font-thin">热门文集</h3>
							<div class="list-group bg-white list-group-lg no-bg auto">
								<a href="#" class="list-group-item clearfix" v-for="(topBook, index) in topBooks">
									<span class="pull-right h2 text-muted m-l">{{ index + 1 }}</span>
									<span class="pull-left thumb-sm avatar m-r">
										<img :src="topBook.photo" alt="...">
									</span>
									<span class="clear">
										<span>{{ topBook.title }}</span>
										<small class="text-muted clear text-ellipsis"> 浏览 {{ topBook.readNum }} 次</small>
									</span>
								</a>
							</div>
						</div>
					</div>
					<div class="row m-t-lg m-b-lg">
						<div class="col-sm-6">
							<div class="bg-primary wrapper-md r">
								<a href="#">
									<span class="h4 m-b-xs block"><i class=" icon-user-follow i-lg"></i> 登录 | 创建账号</span>
									<span class="text-muted">登录或创建帐户后，保存播放列表并与朋友共享。</span>
								</a>
							</div>
						</div>
						<div class="col-sm-6">
							<div class="bg-black wrapper-md r">
								<a href="#">
									<span class="h4 m-b-xs block"><i class="icon-cloud-download i-lg"></i> 下载手机APP</span>
									<span class="text-muted">让桌面和手机的应用程序随时随地净化我们的心灵、寻找本我。</span>
								</a>
							</div>
						</div>
					</div>
				</section>
				<!-- <footer class="footer bg-dark">
					<musicPlayer :palyList='palyList'></musicPlayer>
				</footer> -->
			</section>
		</section>
		<!-- side content -->
		<aside class="aside-md bg-light dk" id="sidebar">
			<section class="vbox animated fadeInRight">
				<section class="w-f-md scrollable hover" id="friends">
					<h4 class="font-thin m-l-md m-t">常联系的朋友</h4>
					<ul class="list-group no-bg no-borders auto m-t-n-xxs">
						<li class="list-group-item" v-for="friend in friends">
							<span class="pull-left thumb-xs m-t-xs avatar m-l-xs m-r-sm">
								<img :src="friend.photo" alt="..." class="img-circle">
								<i class="on b-light right sm"></i>
							</span>
							<div class="clear">
								<div><a href="#">{{ friend.name }}</a></div>
								<small class="text-muted">{{ friend.city }}</small>
							</div>
						</li>
					</ul>
				</section>
				<footer class="footer footer-md bg-black">
					<form class="" role="search">
						<div class="form-group clearfix m-b-none">
							<div class="input-group m-t m-b">
								<span class="input-group-btn">
									<button type="submit" class="btn btn-sm bg-empty text-muted btn-icon"><i class="fa fa-search"></i></button>
								</span>
								<input type="text" class="form-control input-sm text-white bg-empty b-b b-dark no-border" placeholder="查找好友">
							</div>
						</div>
					</form>
				</footer>
			</section>
		</aside>
		<!-- / side content -->
	</section>
	</section>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				// palyList: [],
				zym: '回归自性', //座右铭
				friends: this.getFriends(),
				topBooks: this.getTopBooks(),
				topSongs: this.getTopSongs(),
				topVideos: this.getTopVideos()
			}
		},
		mounted() {
// 			this.palyList = [{
// 				title: "挪威的森林",
// 				artist: "伍佰",
// 				mp3: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
// 				poster: "http://qukufile2.qianqian.com/data2/pic/2037fc888a8f4d84c6fcb62c9536cebd/583717040/583717040.jpg@s_1,w_300,h_300"
// 			}];
// 			this.palyList.push({
// 				title: "挪威的森林",
// 				artist: "伍佰",
// 				mp3: "http://www.jplayer.org/audio/m4a/Miaow-07-Bubble.m4a",
// 				poster: "http://qukufile2.qianqian.com/data2/pic/2037fc888a8f4d84c6fcb62c9536cebd/583717040/583717040.jpg@s_1,w_300,h_300"
// 			});
		},
		methods: {
			getFriends() {
				return [{
						name: '禅心',
						city: '北京',
						photo: 'https://cn.vuejs.org/images/logo.png'
					},
					{
						name: '闲心',
						city: '上海',
						photo: 'http://static4.qianqian.com/web/static/images/logo_2x.png'
					}
				]
			},
			getTopBooks() {
				return [{
						title: '般若波罗蜜多心经',
						readNum: '1012',
						photo: 'https://cn.vuejs.org/images/logo.png'
					},
					{
						title: '佛说入胎经',
						readNum: '901',
						photo: 'http://static4.qianqian.com/web/static/images/logo_2x.png'
					}
				]
			},
			getTopSongs() {
				return [{
						title: '心经',
						author: '梵音组合',
						photo: 'https://cn.vuejs.org/images/logo.png'
					},
					{
						title: '大悲咒',
						author: '梵音组合',
						photo: 'http://static4.qianqian.com/web/static/images/logo_2x.png'
					},
					{
						title: '心经',
						author: '梵音组合',
						photo: 'https://cn.vuejs.org/images/logo.png'
					},
					{
						title: '心经',
						author: '梵音组合',
						photo: 'https://cn.vuejs.org/images/logo.png'
					}
				]
			},
			getTopVideos() {
				return [{
						title: '心经',
						author: '梵音组合',
						photo: '/static/images/p3.jpg'
					},
					{
						title: '大悲咒',
						author: '梵音组合',
						photo: '/static/images/p4.jpg'
					},
					{
						title: '心经',
						author: '梵音组合',
						photo: '/static/images/p5.jpg'
					},
					{
						title: '心经',
						author: '梵音组合',
						photo: '/static/images/p6.jpg'
					},
					{
						title: '心经',
						author: '梵音组合',
						photo: '/static/images/p6.jpg'
					},
					{
						title: '心经',
						author: '梵音组合',
						photo: '/static/images/p6.jpg'
					},
					{
						title: '心经',
						author: '梵音组合',
						photo: '/static/images/p6.jpg'
					},
					{
						title: '心经',
						author: '梵音组合',
						photo: '/static/images/p6.jpg'
					},
					{
						title: '心经',
						author: '梵音组合',
						photo: '/static/images/p6.jpg'
					},
					{
						title: '心经',
						author: '梵音组合',
						photo: '/static/images/p6.jpg'
					},
					{
						title: '心经',
						author: '梵音组合',
						photo: '/static/images/p6.jpg'
					},
					{
						title: '心经',
						author: '梵音组合',
						photo: '/static/images/p6.jpg'
					}
				]
			}
		},
	}
</script>

<style scoped>
</style>
